<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>test.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script type="text/javascript">

var width = 5;
var height = 3;
var mineCount = 2;

function startgame(mCount, width , height){

    gentable();
    ranmine();
}


function gentable(){
    width = parseInt(document.getElementById("width").value);
    height = parseInt(document.getElementById("height").value);

    mineCount = parseInt(document.getElementById("mineCount").value);

    if(mineCount * 2 > width * height){
        alert("Too many mines!");
        return false;
    }else {


        var content ="" ;
        var count = 0 ;

        var oTable = document.getElementById("tableId");
        var oTbody = document.createElement("tbody");

        var oldrows = oTable.rows.length ;

        for(i=0; i<oldrows ;i++){
            oTable.deleteRow(0);
        }

        for(i=1; i<=height; i++){
            var _tr = document.createElement("tr");

            for(j=1; j<=width; j++){
                count++;
                var _td = document.createElement("td");
                _td.className="td_start" ;
                _td.oncontextmenu= function(){ lclick( this ); return false;} ;
                _td.onclick= function() {rclick( this )} ;
                _td.id= count;
                _td.innerHTML="&nbsp;&nbsp;&nbsp;";
                _td.char ="0";
                _td.title = " ";


                _tr.appendChild(_td);

            }

            oTbody.appendChild(_tr);
        }//end for

        oTable.appendChild(oTbody);
    }


}


function ranmine(){

    var count = 0 ;
    var mine = new Array(mineCount);
    var maxId = width * height ;
    var flag = true ;
    while(count < mineCount){

        flag = true;
        var r = parseInt(Math.random()*maxId );
        for(i=0; i<count; i++){
            if(r== mine[i])
                flag = false;
        }
        if(flag == true){
            mine[count] = r;
            count ++;
        }

    }//end while


    for(i=0; i<mineCount ;i++){
        document.getElementById(mine[i]).char="-1";
        document.getElementById(mine[i]).title="-1";
    }

    for(i=1 ; i<=maxId ;i++){
        getminecount(i);
    }

}

function getminecount(mId){

    var count = parseInt(document.getElementById(mId).char);
    if(count ==-1){
// means of mine;
        return ;
    }

    var w = 0 ;
    var h = 0 ;

    if(mId%width ==0){
        w = width;
        h = Math.floor(mId/width) ;
    }else {
        w= mId%width ;
        h = Math.floor(mId/width) + 1 ;
    }


    var c =0;
    c = c + countmine(w-1, h-1);
    c = c + countmine(w-1, h);
    c = c + countmine(w-1, h+1);

    c = c + countmine(w, h-1);
    c = c + countmine(w, h+1);

    c = c + countmine(w+1, h-1);
    c = c + countmine(w+1, h);
    c = c + countmine(w+1, h+1);

    document.getElementById(mId).char = c ;
    document.getElementById(mId).title = c ;


}


function countmine(w, h){
    if(checkPoz(w, h)){
        tId = (h-1)*width + (w) ;
        var cell = document.getElementById(tId);
        var count = parseInt(cell.char);
        if(count == -1 ){
            return 1;
        }

    }
    return 0 ;
}


function rclick(it){
    var count = parseInt(it.char);
    if(count == -1){
        gameover();
    }else if(count > 0) {
        it.innerHTML = count ;
        it.className = "td_null" ;
    }else if(count ==0) {
        clearnull(it);
    }

}

function lclick(it){


    if(it.className =="td_start"){
        if(it.innerHTML == "&nbsp;&nbsp;&nbsp;"){
            it.innerHTML ="<img src='flag.png' alt='flag' class='td_img' />" ;
        }
        else if(it.firstChild.alt =="flag"){
            it.innerHTML ="<img src='ask.jpg' alt='ask' class='td_img' />" ;
        }else if(it.firstChild.alt =="ask"){
            it.innerHTML ="&nbsp;&nbsp;&nbsp;" ;
        }
    }
}

function clearnull(it){

    if(it.innerHTML != "&nbsp;&nbsp;&nbsp;"){

        return ;
    }


    it.className = "td_null" ;


    var w = 0 ;
    var h = 0 ;
    var mId = it.id;

    if(mId%width ==0){
        w = width;
        h = Math.floor(mId/width) ;
    }else {
        w= mId%width ;
        h = Math.floor(mId/width) + 1 ;
    }


    checkaround(w-1, h-1);
    checkaround(w-1, h);
    checkaround(w-1, h+1);

    checkaround(w, h-1);
    checkaround(w, h+1);

    checkaround(w+1, h-1);
    checkaround(w+1, h);
    checkaround(w+1, h+1);


}


function checkaround(w, h){

    if(checkPoz(w, h)){

        var tId = (h-1)*width + w ;
        var cell = document.getElementById(tId+"");

        var count = parseInt(cell.char);


        if(cell.className == "td_start" && count ==0 ){

            clearnull(cell);
        }else if(cell.className == "td_start" && count > 0 ){
            cell.innerHTML = count ;
            cell.className = "td_null" ;
        }

    }
}



function checkPoz (x, y){
    if(x<=0 || x> width || y<=0 || y>height){
        return false;
    }else {
        return true;
    }

}

function gameover(){

    var maxId = width * height ;

    for(i=1; i<=maxId; i++){

        var cell = document.getElementById(i);
        var count = parseInt(cell.char);

        cell.className = "td_null" ;
        if(count >0){
            cell.innerHTML = cell.char ;
        }
        else if(count == -1){
            cell.className = "td_mine" ;
            cell.innerHTML = "<img src='mine.png' alt='mine' class='td_img' />" ;


        }



    }
    alert("failed");
}

</script>
<style>
    <!--
    BODY
    {
    }

    .td_img{
        HEIGHT: 21px;
        WIDTH: 21px;
        margin: 2px;
    }

    .td_start{
        BACKGROUND-COLOR: royalblue;
        CURSOR: pointer;
        HEIGHT: 25px;
        WIDTH: 25px;
        border:1px solid #7a7a7c;
    }

    .td_null{
        BACKGROUND-COLOR: white;
        CURSOR: default ;
        HEIGHT: 25px;
        WIDTH: 25px;
        border:1px solid #7a7a7c;
    }

    .td_mine{
        BACKGROUND-COLOR: firebrick;
        CURSOR: default;
        HEIGHT: 25px;
        WIDTH: 25px;
        border:1px solid #7a7a7c;
    }


    .GT
    {
        BORDER-BOTTOM: deepskyblue thin solid;
        BORDER-LEFT: deepskyblue thin solid;
        BORDER-RIGHT: deepskyblue thin solid;
        BORDER-TOP: deepskyblue thin solid;
        CURSOR: default
    }

    -->
</style>
</head>

<body>
行数:&nbsp;<input type="text" id="height" maxlength="2" value="9" /><br/>
列数:&nbsp;<input type="text" id="width" maxlength="2" value="9" /> <br/>
雷数:&nbsp;<input type="text" id="mineCount" maxlength="2" value="10" /> <br/><br/>
<input type="button" value=" Start Game " onclick="startgame();" />

<table cellspacing=1 cellpadding=1 class=gt border=1 bordercolor="LightYellow " style="position:absolute;left:250px;top:100px;" id="tableId" >


</table>
</body>
</html>
